@import "../../common/less/module.less";

body{
    background: #17203d url(../img/bg.png) no-repeat;
}

.scene{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 625px;
    overflow: hidden;
    &>div{
       position: absolute;
    
    }
    .star{
        width: 100%;
        height: 511px;
        background:url(../img/sart.png) no-repeat center;
    }
    .ball{
        width: 100%;
        height: 617px;
        background:url(../img/ball.png) no-repeat center;
    }
}
.warp{
    position: relative;
    margin: 0 auto;
    width: 1000px;
}
.s{ 
    background:url(../img/s.png) no-repeat;
}
.t-line{
    background:url(../img/time.png) no-repeat;
}
.w-icon{
    background:url(../img/works.png) no-repeat
}
.info{
    margin-top: 180px; 
    opacity:0;  
    transform:translate(0,50px);
    animation:info 1s ease  1 forwards; 
    .head{
        position: relative;
        margin: 0 auto;
        width: 347px;
        height: 290px; 
        background:url(../img/head.png) no-repeat;
        span{
            position: absolute;
            left:60px;
            display: block;
            width: 35px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            font-size: 20px;
            font-family: Arial;
            background-color:#fff;
            border-radius: 50%;
            border:3px solid #354b89;
        }
    }
    .name{
        margin:30px auto 0;
        width: 177px;
        height: 50px;
        font-size: 0;
        .s;
    }
    .contact{
        position: relative;
        margin:50px auto 0;
        padding: 0 30px;
        width: 800px;
        height: 43px;
        line-height: 43px;
        background-color: #1e2b51;
        border-radius: 10px;
        color:#5c74c0;
        font-size: 15px;
        font-family: \5fae\8f6f\96c5\9ed1;
        .item{
            margin-right: 46px;
        }
        span:last-of-type{
            margin-right: 0;
        }
        a{
            text-decoration: none;
            color:#5c74c0;
        }
        .tg{
            position: absolute;
            top:-9px;
            left:50%;
            .triangle-top(18,9,#1e2b51);
        }
    }
}

@keyframes info {
    100% {
        opacity:1;
        transform:translate(0,0);
    }
}

.tit{
    font-family: \5fae\8f6f\96c5\9ed1;
    font-size: 30px;
    color:#d7def3;
    text-align: center;
}

.say{
    position: relative;
    margin: 200px auto;
    span{
        position: absolute;
    }
    .circle{
        top: -5px;
        left:210px;
        z-index: 10;
        display:inline-block;
        width: 6px;
        height: 4px;
        border-bottom: 16px solid #2a3965;
        border-bottom-left-radius: 100%;
        transform:rotate(-44deg);
    } 
    .circle2{
        z-index: 10;
        top: -43px;
        left: 195px;
        display:inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color:#82889d;
        font-size: 20px;
        font-family: \5fae\8f6f\96c5\9ed1;
        border-radius: 50%;
        background-color: #2a3965;
    }
    .circle3{
        top: 0px;
        left: 211px;
        z-index: 9;
        display:inline-block;
        width: 6px;
        height: 4px;
        border-bottom: 16px solid #1e2b51;
        border-bottom-left-radius: 100%;
        transform:rotate(-44deg);
    } 
    .circle4{
        z-index: 9;
        top:-48px;
        left:190px;
        display:inline-block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #1e2b51;
    }  
    .txt{
       font-size: 25px;
    }
    .txt:before{
        position: absolute;
        left: 745px;
        top: -21px;
        content: '';
        width: 60px;
        height: 80px;
        background: url(../img/bz.png) no-repeat;
        background-size: 64px 73px;
    }
}

.tool{
    .tool-cont{
        margin:0  auto;
        overflow: hidden;
        width: 824px;
    }
    ul{
        margin: 110px auto 0;
        width: 1000px;
        overflow: hidden;
        li{
            display:inline-block;
            margin-right: 130px;
            margin-bottom: 40px;
            float: left;
            width: 188px;
            height: 80px;
            .s;
            opacity:0;
            transform:translate(0px,100px);
        }
        .ps{
            background-position: -306px -165px;
            // animation:toolUp 1s ease .1s 1 forwards;
        }
        .st{
            background-position: -11px -83px; 
            // animation:toolUp 1s ease  .5s 1 forwards;
        }
        .git{
            background-position: -313px -80px;
            // animation:toolUp 1s ease .9s 1 forwards;
        }
        .fb{
            background-position: -11px -264px; 
            // animation:toolUp 1s ease .1s 1 forwards;
        }
        .svn{
            background-position: -8px -170px; 
            // animation:toolUp 1s ease 0.5s 1 forwards;
        }
        .phps{
            background-position: -306px -250px;
            // animation:toolUp 1s ease .9s 1 forwards;
        }
    }
}

.tool-cur{
    .ps{
        animation:toolUp 1s ease .1s 1 forwards;
    }
    .st{
        animation:toolUp 1s ease  .5s 1 forwards;
    }
    .git{
        animation:toolUp 1s ease .9s 1 forwards;
    }
    .fb{
        animation:toolUp 1s ease .1s 1 forwards;
    }
    .svn{
        animation:toolUp 1s ease 0.5s 1 forwards;
    }
    .phps{
        animation:toolUp 1s ease .9s 1 forwards;
    }
}
@keyframes toolUp{
    100%{
        opacity:1;
        transform:translate(0px,0px);
    }
}


.skill{
    margin: 140px auto;
    width: 100%;
    
    .tit{
        margin-bottom: 70px;
    }
    .skill-cont{
        margin-left:35px;
        padding:10px 10px;
        width: 906px;
        overflow: hidden;
        opacity:0;
        transform:translate(0px,100px);
        // animation:skillUp 2s ease  1 forwards;
        span{
            position:relative;
            float: left;
            margin-right: 25px;
            width:71px;
            height:71px;
            border:1px solid #fff;
            line-height: 71px;
            text-align: center;
            border-radius: 100%;
            background-color: #17203d;
            color:#d7def3;
            font-size: 18px;
        }
        .less{
            border-color: #ff9d9d;
            transform:translate(392px,0px);
            .box-shadow(@shadow: 0px 0px 9px #ff7878);
            // animation:skill 1s ease 2s 1 forwards;
        }
        .response{
            border-color: #ffbb78;
            transform:translate(295px,0px);
            .box-shadow(@shadow: 0px 0px 9px #ffbb78);
            // animation:skill 1s ease 2.2s 1 forwards;
        }
        .seajs{
            border-color: #fffd57;
            transform:translate(197px,0px);
            .box-shadow(@shadow: 0px 0px 9px #fffd57);
            // animation:skill .8s ease 2.4s 1 forwards;
        }
        .gulp{
            border-color: #a0ff60;
            transform:translate(99px,0px);
            .box-shadow(@shadow: 0px 0px 9px #72ff5b);
            // animation:skill .6s ease 2.6s 1 forwards;
        }
        .html5{
            z-index: 100;
            border-color: #5ef6ff;
            .box-shadow(@shadow: 0px 0px 9px #5ef6ff)
        }
        .css3{
            border-color: #62a5ff;
            transform:translate(-99px,0px);
            .box-shadow(@shadow: 0px 0px 9px #62a5ff);
            // animation:skill .6s ease 2.6s 1 forwards;
        }
        .jq{
            border-color: #ae7dff;
            transform:translate(-197px,0px);
            .box-shadow(@shadow: 0px 0px 9px #9555ff);
            // animation:skill .8s ease 2.4s 1 forwards;
        }
        .iconf{
            border-color: #ff86e7;
            transform:translate(-295px,0px);
            .box-shadow(@shadow: 0px 0px 9px #ff5ddf);
            // animation:skill 1s ease 2.2s 1 forwards;
        }
        .ajax{
            border-color: #c5cce1;
            transform:translate(-392px,0px);
            .box-shadow(@shadow: 0px 0px 9px #4b5d94);
            // animation:skill 1s ease 2s 1 forwards;
        }
    }
}

.skill-cur{
    .skill-cont{
        animation:skillUp 2s ease  1 forwards;
    }
    .less{
        animation:skill 1s ease 2s 1 forwards;
    }
    .response{
        animation:skill 1s ease 2.2s 1 forwards;
    }
    .seajs{
        animation:skill .8s ease 2.4s 1 forwards;
    }
    .gulp{
        animation:skill .6s ease 2.6s 1 forwards;
    }
    .css3{
        animation:skill .6s ease 2.6s 1 forwards;
    }
    .jq{
        animation:skill .8s ease 2.4s 1 forwards;
    }
    .iconf{
        animation:skill 1s ease 2.2s 1 forwards;
    }
    .ajax{
        animation:skill 1s ease 2s 1 forwards;
    }
}

@keyframes skillUp{
    100%{
        opacity:1;
        transform:translate(0px,0px);
    }
}

@keyframes skill{
    100%{
        transform:translate(0px,0px);
    }
}


.history{
    margin-bottom: 140px;
    font-family: \5fae\8f6f\96c5\9ed1;
    .tit{
        margin:140px 0;
    }
    .h-cont{
        position: relative;
        margin:0 auto;
        width: 350px;
        height: 350px;
    }
    .area1{
        z-index: 59;
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -46px;
        margin-left: -46px;
        width: 93px;
        height: 93px;
        border-radius: 50%;
        border:2px solid  #505076;
        box-shadow:inset 0px 0px 4px #2a365c;
        &:before{
            z-index: 58;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -42px;
            margin-left: -40px;
            content:"";
            width: 84px;
            height: 84px;
            border-radius: 50%;
            background-color: #17203d;
        }
        &:after{
            z-index: 57;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -54px;
            margin-left: -54px;
            content:"";
            width: 0;
            height: 0;
            line-height: 0;
            overflow: hidden;
            display: inline-block;
            border-color: #505076 #505076 #505076 transparent;
            border-style: solid solid solid dashed;
            border-width: 54px 54px 54px 54px;
            border-radius: 50%;
            transform:rotate(100deg);
            // animation:areaRotate 1s ease 0.1s 1 forwards;
        }
    }
    .area2{
        z-index: 50;
        position: absolute;
        top:50%;
        left:50%;
        margin-left: -68px;
        margin-top: -68px;
        width: 118px;
        height: 118px;
        border-radius: 50%;
        border:12px solid #8d512d;
    }
    .area3{
        z-index: 47;
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -83px;
        margin-left: -83px;
        width: 166px;
        height: 166px;
        border-radius: 50%;
        border:2px solid  #144a70;
        &:after{
            z-index: 48;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -91px;
            margin-left: -91px;
            content:"";
            width: 0;
            height: 0;
            line-height: 0;
            overflow: hidden;
            display: inline-block;
            border-color: #144a70 #144a70 #144a70 transparent;
            border-style: solid solid solid dashed;
            border-width: 91px 91px 91px 91px;
            border-radius: 50%;
            transform:rotate(0deg);
            // animation:areaRotate2 1s ease 0.2s 1 forwards;
        }
        &:before{
            z-index: 49;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -77px;
            margin-left: -77px;
            content:"";
            width: 155px;
            height: 155px;
            border-radius: 50%;
            background-color: #17203d;
        }
    }
    .area4{
        z-index: 37;
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -103px;
        margin-left: -103px;
        width: 206px;
        height: 206px;
        border-radius: 50%;
        border:2px solid  #608815;
        &:after{
            z-index: 38;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -111px;
            margin-left: -111px;
            content:"";
            width: 0;
            height: 0;
            line-height: 0;
            overflow: hidden;
            display: inline-block;
            border-color: #608815 #608815 #608815 transparent;
            border-style: solid solid solid dashed;
            border-width: 111px 111px 111px 111px;
            border-radius: 50%;
            transform:rotate(-30deg);
        }
        &:before{
            z-index: 39;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -98px;
            margin-left: -98px;
            content:"";
            width: 196px;
            height: 196px;
            border-radius: 50%;
            background-color: #17203d;
        }
    }
    .area5{
        z-index: 27;
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -123px;
        margin-left: -123px;
        width: 246px;
        height: 246px;
        border-radius: 50%;
        border:2px solid  #634e6f;
        &:after{
            z-index: 28;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -131px;
            margin-left: -131px;
            content:"";
            width: 0;
            height: 0;
            line-height: 0;
            overflow: hidden;
            display: inline-block;
            border-color: #634e6f #634e6f transparent transparent;
            border-style: solid solid dashed dashed;
            border-width: 131px 131px 131px 131px;
            border-radius: 50%;
            transform:rotate(360deg);
            // animation:areaRotate 1s ease 0.4s 1 forwards;
        }
        &:before{
            z-index: 29;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -118px;
            margin-left: -118px;
            content:"";
            width: 237px;
            height: 237px;
            border-radius: 50%;
            background-color: #17203d;
        }
    }
    .time-item{
        z-index: 60;
        position:absolute;
        .t-line;
        color:#d7def3;
        .time{
            font-size: 18px;
        }
        p{
            font-size: 16px;
            line-height: 20px;
        }
    }
    .time-line1{
        top:-10px;
        left:-230px;
        width:395px;
        height:158px;
        background-position: 196px 5px;
        opacity:0;
        transform:scale(0);
        // animation:max 1s ease 1.2s 1 forwards;
        .time{
            margin-left: 130px;
        }
    }
    .time-line2{
        top:33px;
        left:215px;
        padding-left: 125px;
        width:425px;
        height:95px;
        background-position: -279px 5px;
        opacity:0;
        transform:scale(0);
        // animation:max 1s ease 1.4s 1 forwards;
        p{
            width:288px;
        }
    }
    .time-line3{
        top: 170px;
        left: -275px;
        width: 382px;
        height: 61px;
        background-position: 248px -175px;
        opacity:0;
        transform:scale(0);
        // animation:max 1s ease 1.8s 1 forwards;
        span{
            margin-left: 110px;
        }
        p{
            width:245px;
        }
    }
    .time-line4{
        top: 273px;
        left: 207px;
        padding-top: 18px;
        padding-left: 85px;
        width:395px;
        height:70px;
        background-position:-322px -165px;  
        opacity:0;
        transform:scale(0);
        // animation:max 1s ease 2.1s 1 forwards;
    }
    .time-line5{
        top: 293px;
        left: -285px;
        padding-top: 85px;
        width:478px;
        height:126px;  
        background-position: 376px -247px;
        opacity:0;
        transform:scale(0);
        // animation:max 1s ease 2.5s 1 forwards;
        span{
            margin-left: 237px;
        }
    }
}

.h-cur{
    .area1:after{
        animation:areaRotate 1s ease 0.1s 1 forwards;
    }
    .area3:after{
        animation:areaRotate2 1s ease 0.2s 1 forwards;
    }
    .area5:after{
        animation:areaRotate 1s ease 0.4s 1 forwards;
    }
    .time-line1{
        animation:max 1s ease 1.2s 1 forwards;
    }
    .time-line2{
        animation:max 1s ease 1.4s 1 forwards;
    }
    .time-line3{
        animation:max 1s ease 1.8s 1 forwards;
    }
    .time-line4{
        animation:max 1s ease 2.1s 1 forwards;
    }
    .time-line5{
        animation:max 1s ease 2.5s 1 forwards;
    }
}
@keyframes areaRotate{
    100%{
        transform:rotate(179deg);
    }
}
@keyframes areaRotate2{
    100%{
        transform:rotate(120deg);
    }
}
@keyframes areaRotate3{
    100%{
        transform:rotate(10deg);
    }
}

@keyframes max{
    0%,20%,40%,60%,80%,100% {
        transition-timing-function: cubic-bezier(0.215,0.61,0.355,1)
    }
      0% {
        opacity: 1;
        transform: scale3d(.3,.3,.3)
    }

    20% {
        opacity: 1;
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        opacity: 1;
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        opacity: 1;
        transform: scale3d(.97,.97,.97)
    }

    100% {
        opacity: 1;
        transform: scale3d(1,1,1)
    }
}


.works{
    margin: 350px 0;
    .tit{
        margin-bottom: 90px;
    }
    ul{
        margin: 0 auto;
        width:816px;
        overflow:hidden;
        li{
            float:left;
            width:408px;
            color:#d7def3;
            font-family: \5fae\8f6f\96c5\9ed1;
            .w-icon{
                float:left;
                margin-right: 10px;
                width:108px;
                height:110px;
            }
            .w-tit{
                display:inline-block;
                margin-top: 10px;
                font-size:20px;
            }
            a{
                display:block;
                color:#d7def3;
                font-size: 16px;
                margin-top: 20px;
            }
        }
        .css-icon{
            background-position: -132px -3px;
        }
    }
}

.footer{
    width: 100%;
    height: 80px;
    background-color: #fcf5f2;
    .f-cont{
        margin:0 auto;
        width: 1000px;
        color:#666;
        font-size: 20px;
        line-height: 80px;
        text-align: center;
    }
}